import React from 'react';
import { connect } from 'dva';
import {InputItem} from 'antd-mobile';
import styles from './screenPage.css';
import cutStr from '../../../../../../framework/utils/cutStr';
import CustBtn from '../../../../../../common/buttons/Btn';

const ScreenPage = ({
  hiddenArr = [],
}) => {


  //性别要求
  const sexSelect = () =>{

    const sexList = [
      {id:"1", name:"不限", value:""},
      {id:"2", name:"男", value:""},
      {id:"3", name:"女", value:""},
    ]
    return(
      <div className={styles.item}>
        <div className={styles.itemTitle}>性别要求</div>
        <div className={styles.itemCheckBoxs}>
          {sexList.map((item, index) => {
            return (
              <div key={item.id}>
                <input type="radio" id={`sex_${item.id}`} name="sex"
                  className={styles.inputCheckBox}
                  onClick={(e) => {}}
                />
                <label htmlFor={`sex_${item.id}`}>{item.name}</label>
              </div>
            )
          })}
        </div>
      </div>
    )
  }

  //上班时间段 (多选)
  const timeSlotSelect = () =>{

    const sexList = [
      {id:"1", name:"不限", value:""},
      {id:"2", name:"上午", value:""},
      {id:"3", name:"下午", value:""},
      {id:"4", name:"晚上", value:""},
    ]
    return(
      <div className={styles.item}>
        <div className={styles.itemTitle}>上班时间段 (多选)</div>
        <div className={styles.itemCheckBoxs}>
          {sexList.map((item, index) => {
            return (
              <div key={item.id}>
                <input type="checkbox" id={`slot_${item.id}`}
                  className={styles.inputCheckBox}
                  onClick={(e) => {}}
                />
                <label htmlFor={`slot_${item.id}`}>{item.name}</label>
              </div>
            )
          })}
        </div>
      </div>
    )
  }

  //工作周期
  const timePeriodSelect = () => {

    const timePeriodList = [
      {id:"1", name:"不限", value:""},
      {id:"2", name:"长期", value:""},
      {id:"3", name:"短期", value:""},
    ]
    return(
      <div className={styles.item}>
        <div className={styles.itemTitle}>性别要求</div>
        <div className={styles.itemCheckBoxs}>
          {timePeriodList.map((item, index) => {
            return (
              <div key={item.id}>
                <input type="radio" id={`time_period_${item.id}`} name="time_period"
                  className={styles.inputCheckBox}
                  onClick={(e) => {}}
                />
                <label htmlFor={`time_period_${item.id}`}>{item.name}</label>
              </div>
            )
          })}
        </div>
      </div>
    )
  }

  //Release date
  const releaseDateSelect = () => {

    const releaseDateList = [
      {id:"1", name:"不限", value:""},
      {id:"2", name:"一天内", value:""},
      {id:"3", name:"一周内", value:""},
      {id:"4", name:"一月内", value:""},
    ]
    return(
      <div className={styles.item}>
        <div className={styles.itemTitle}>性别要求</div>
        <div className={styles.itemCheckBoxs}>
          {releaseDateList.map((item, index) => {
            return (
              <div key={item.id}>
                <input type="radio" id={`release_date_${item.id}`} name="release_date"
                  className={styles.inputCheckBox}
                  onClick={(e) => {}}
                />
                <label htmlFor={`release_date_${item.id}`}>{item.name}</label>
              </div>
            )
          })}
        </div>
      </div>
    )
  }

  const btnProps = {
    textValue:'确定',
    onOk(){

    },
  }

  return(

    <div className={styles.screenContent}>
      {sexSelect()}
      {timeSlotSelect()}
      {timePeriodSelect()}
      {releaseDateSelect()}

      <div className={styles.footBtn}>
        <CustBtn {...btnProps}/>
      </div>
    </div>
  )
}

export default ScreenPage;
